<template>
  <div id="itemMain" ref="itemRef"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    dataList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      myChart: null,
      option: {},
    };
  },
  mounted() {
    let chartDom = this.$refs.itemRef;
    this.myChart = echarts.init(chartDom, null, {
      devicePixelRatio: 2.5,
    });
    let nameList = [];
    let numList = [];
    this.dataList.forEach((item) => {
      nameList.push(item.jiancheng);
      numList.push(item.bhgsum);
    });
    this.option = {
      title: {
        text: '各区疑似阳性数',
        textStyle: {
          color: '#fff',
          fontSize: 14,
        },
      },
      legend: {
        top: 2,
        left: '50%',
        textStyle: {
          color: 'rgba(255,255,255,1)',
          fontSize: '12',
        },
        icon: 'stack',
        itemWidth: 10,
        itemHeight: 10,
      },
      grid: {
        bottom: 50,
        left: '12%',
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: '12',
            color: 'rgba(255,255,255,1)',
          },
        },
        axisLabel: {
          interval: 0,
          rotate: 40,
          textStyle: {
            fontSize: '12',
            color: 'rgba(255,255,255,1)',
          },
        },
        axisTick: { show: false },
        data: nameList,
      },
      yAxis: [
        {
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: '14',
              color: 'rgba(255,255,255,1)',
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)',
            },
          },
        },
      ],
      series: [
        {
          type: 'bar',
          barWidth: 6,
          itemStyle: {
            barBorderRadius: [12, 12, 0, 0],
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#41C9FF',
                },
                {
                  offset: 1,
                  color: '#76F962',
                },
              ]),
              opacity: 1,
              barBorderRadius: [30, 30, 0, 0],
            },
          },
          data: numList,
        },
      ],
    };
    this.myChart.setOption(this.option);
    window.addEventListener('resize', () => {
      this.myChart.resize();
    });
  },
};
</script>

<style lang="less" scoped>
#itemMain {
  width: 100%;
  height: 100%;
}
</style>
